<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <!-- 引入重置样式表 reset.css -->
    <link rel="stylesheet" href="../lib/css/reset.css">
    <!-- 引入字体图标样式表 iconfont.css -->
    <link rel="stylesheet" href="../static/fonts/iconfont.css">
    <!-- 引入公共样式表 common.css-->
    <link rel="stylesheet" href="../css/common.css">
    <!-- 引入商品详情页样式表 register.css -->
    <link rel="stylesheet" href="../css/details.css">

</head>

<body>
    <!-- 顶部搜索栏 -->

    <div id="header">
        <div class="container clearfix">
            <img src="../static/images/logo.png" alt="熊猫优选logo">
            <div class="panda">
                <h2>熊猫优选</h2>
                <p>XIONG MAO YOU XUAN</p>
            </div>


            <!-- 中间搜索框 -->
            <div class="search">
                <input type="text" placeholder="搜索商品，发现更多优惠">
                <span class="iconfont icon-bendisousu"></span>
                <div>搜索</div>
            </div>

            <!-- 右边品质+购物车入口 -->
            <div class="shopRelevent fr">
                <ul class="shop">
                    <li><span class="iconfont icon-99yuanbaoyou text"></span> <br> 全程包邮</li>
                    <li><span class="iconfont icon-7tiantuihuan text"></span> <br> 七天退化</li>
                    <li><span class="iconfont icon-shenqingchenggonggougouicon text"></span> <br> 品质保证</li>
                    <li><span class="iconfont icon-gouwucheman text cart"></span> <br> 查看购物车 </li>
                </ul>

            </div>
            <!-- 登录提示 -->
            <p class="fr login">
                <span>尚未登录</span>
                <span>退出登录</span>
                <span class="freeRigester">免费注册</span>
            </p>
        </div>
    </div>

    <!-- 导航栏 -->
    <div id="nav">
        <ul class="container clearfix">
            <li> <a href="../pages/index.html">返回首页</a> </li>

        </ul>
    </div>

    <!-- 主体区域 -->

    <div id="main">
        <!-- 商品区域 -->
        <div class="container clearfix">
            <!-- 左边放大镜展示区域 -->
            <div class="left glass fl">
                <!-- 展示盒子 -->
                <ol class="showBox">

                </ol>
                <!-- 移动的遮罩层 -->
                <ul class="smallPic tab clearfix">
                    <!-- 动态 -->
                </ul>

                <!-- 移动的遮罩层 -->
                <div class="mask"></div>

            </div>


            <!-- 右边大盒子 -->

            <div class="right">
                <!-- 展示的大图片 -->
                <ul class="bigPic">
                   
                </ul>

                <!-- 中间商品详细说明 -->
                <div class="description fl">
                    <!-- 动态渲染 -->
                </div>
            </div>

            <!-- 右边店铺信息 -->
            <div class="store fr">
                -----皇冠卖家----
                <p>小牛的果卷</p>
                信誉：极好

                <ul>
                    <li>描述<span>5.0</span></li>
                    <li>服务<span>5.0</span></li>
                    <li>物流<span>5.0</span></li>
                </ul>
                <div class="enter">

                    <span>进入店铺</span>
                    <span>收藏店铺</span>
                </div>

                <dl>
                    <h3>看了又看</h3>
                    <dt><img src="http://img.alicdn.com/bao/uploaded/O1CN01A58PKN1zp2qOAGy91_!!350136762.jpg_80x80.jpg"
                            alt="">
                    </dt>
                    <dd>￥9.80</dd>

                </dl>
            </div>

        </div>
        <!-- 商品导航栏 -->
        <div id="productNav">
            <ul class="clearfix container">
                <li>宝贝详情</li>
                <li>评价</li>
                <li>专享服务</li>
            </ul>
        </div>
        <!-- 下方商品大图展示 -->
        <ul class="display">
            <!-- 动态渲染 -->
        </ul>

        <!-- 底部加载更多 -->
        <div class="loadMore">
            加载更多
        </div>
    </div>
    </div>



    <!-- 底部版权相关 -->
    <div id="copyright">
        <div class="container clearfix">
            <img src="../static/images/logo.png" alt="" class="fl logo">
            <div class="fl text">
                <h2>熊猫优选</h2>
                <p>年轻人网购首选</p>
                <p>购物领券更省钱</p>
            </div>

            <p class="download"><a href="http://www.xiongmaoyouxuan.com/#/downLoad">| 下载App</a></p>
            <p class="rights"><img src="../static/images/policeIcon.webp" alt="">浙公安网备案33010602009949号<img
                    src="../static/images/license.webp" alt="">ICP备案号:浙lCP备17012864号-1</p>
        </div>
    </div>

    <div id="aside">
        <img src="../static/images/backTop.png" alt="返回顶部">
    </div>
    <!-- jq -->
    <script src="../lib/js/jquery-3.6.0.js"></script>
    <!-- axios -->
    <script src="../lib/js/axios.min.js"></script>
    <!-- 轮播 -->
    <script src="../lib/js/swiper-bundle.min.js"></script>
    <!-- 公共 -->
    <script src="../js/common.js"></script>
    <!-- 详情 -->
    <script src="../js/details.js"></script>
</body>

</html>